<template>
  <view class="containar">
    <view class="avatarUrl">
      <button type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
        <image :src="avatarUrl" class="refreshIcon"></image>
      </button>
    </view>
    <view class="nickname">
      <text>昵称：</text>
      <input type="nickname" class="weui-input" :value="nickName" @blur="bindblur" placeholder="请输入昵称"
        @input="bindinput" />
    </view>
    <view class="nickname">
      <text>性别：</text>
      <u-radio-group v-model="sex" @change="radioGroupChange">
        <u-radio :name="'男'">
          男
        </u-radio>
        <u-radio :name="'女'">
          女
        </u-radio>
      </u-radio-group>
    </view>
    <view class="nickname">
      <text>手机号：</text>
      <input class="weui-input" v-model="phone" placeholder="请输入手机号" />
    </view>

    <view class="btn">
      <view class="btn-sub" @click="onSubmit">保存</view>
    </view>
  </view>
</template>

<script>
import { userUpdate } from '@/api/login'
import { baseUrl } from "@/config"; // 默认路径
import { getToken } from '@/utils/auth'
import store from '@/store'
export default {
  data() {
    return {
      avatarUrl: 'https://pic4.zhimg.com/80/v2-89645d664e2b048afd8060c7ed8cc5e3_720w.webp',
      nickName: '',
      phone: "",
      sex: '男'
    };
  },
  onLoad(option) {
    let userInfo = store.getters
    this.avatarUrl = userInfo.avatar
    this.nickName = userInfo.name
    this.sex = userInfo.sex
    this.phone = userInfo.phone
    console.log(userInfo);
  },
  methods: {
    bindblur(e) {
      this.nickName = e.detail.value; // 获取微信昵称
    },
    bindinput(e) {
      this.nickName = e.detail.value; //这里要注意如果只用blur方法的话用户在输入玩昵称后直接点击保存按钮，会出现修改不成功的情况。
    },
    onChooseavatar(e) {
      const accessToken = getToken() || null; //获取token
      let self = this;
      let {
        avatarUrl
      } = e.detail;
      uni.showLoading({
        title: '加载中'
      });
      uni.uploadFile({
        url: baseUrl + "/v1/files",
        filePath: avatarUrl,
        name: 'file',
        header: {
          Authorization: `Bearer ${accessToken}`,
        },
        success: uploadFileRes => {
          // 注意：这里返回的uploadFileRes.data 为JSON 需要自己去转换
          let data = JSON.parse(uploadFileRes.data);
          this.avatarUrl = data.data.url;

        },
        fail: (error) => {
          uni.showToast({
            title: error,
            duration: 2000
          });
        },
        complete: () => {
          uni.hideLoading();
        }
      });
    },
    radioGroupChange(e) {
      console.log(e);
    },
    onSubmit() {
      console.log(this.phone);
      if (this.nickName === '') {
        uni.showToast({
          icon: 'none',
          title: '请输入昵称'
        })
        return false;
      }
      if (this.avatarUrl === '') {
        uni.showToast({
          icon: 'none',
          title: '请选择头像'
        })
        return false;
      }
      if (this.phone === '') {
        uni.showToast({
          icon: 'none',
          title: '请输入手机号'
        })
        return false;
      }
      let data = {
        "name": this.nickName,
        "profilePhoto": this.avatarUrl,
        phone: this.phone,
        sex: this.sex
      }
      userUpdate(data).then((result) => {
        uni.showToast({
          icon: 'none',
          title: '用户信息更新成功'
        })
        store.dispatch('GetInfo').then((res) => {
          uni.reLaunch({ url: "/pages/mine/index" });

        });

      }).catch((err) => {

      });
      // 这里做存储逻辑
    }
  }
};
</script>

<style lang="scss">
page {
  background-color: #ffffff;
}

.containar {
  .avatarUrl {
    padding: 80rpx 0 40rpx;
    background: #fff;

    button {
      background: #fff;
      line-height: 80rpx;
      height: auto;
      width: auto;
      padding: 20rpx 30rpx;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;

      .refreshIcon {
        width: 160rpx;
        height: 160rpx;
        border-radius: 50%;
      }

      .jt {
        width: 14rpx;
        height: 28rpx;
      }
    }
  }

  .nickname {
    background: #fff;
    padding: 20rpx 30rpx 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    .weui-input {
      padding-left: 60rpx;
    }
  }

  .btn {
    width: 100%;

    .btn-sub {
      width: 670rpx;
      margin: 80rpx auto 0;
      height: 90rpx;
      background: #DF8585;
      border-radius: 45rpx;
      line-height: 90rpx;
      text-align: center;
      font-size: 36rpx;
      color: #fff;
    }
  }
}
</style>
